import React from "react";
import { Routes, Route, NavLink } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import One from "./pages/One";
import Two from "./pages/Two";
import Three from "./pages/Three";

export default function App() {
  return (
    <div className="container">
      <nav>
        <NavLink to={"/"}>首页</NavLink>
        {/*search传递参数
                    to的值可以是字符串也可以是对象
                */}
        <NavLink to={'/one?a=1&b=2'}>ONE1</NavLink>
        <NavLink to={{
          pathname:'/one?a=10&b=20'
        }}>ONE2</NavLink>
        <NavLink to={{
          pathname: '/one',
          search:'a=100&b=200'
        }}>ONE3</NavLink>

        
        <NavLink to={"/one"}>ONE</NavLink>
        <NavLink to={"/two"}>TWO</NavLink>
        <NavLink to={"/three"}>THREE</NavLink>
      </nav>
      <Routes>
        <Route path={"/"} element={<Home />}>
          首页
        </Route>
        <Route path={"/one"} element={<One />}>
          ONE
        </Route>
        <Route path={"/two"} element={<Two />}>
          TWO
        </Route>
        <Route path={"/three"} element={<Three />}>
          THree
        </Route>
      </Routes>
    </div>
  );
}
